<template>
  <div style="background:#fff;border-radius: 0.1rem;">
    <div class="total"><img src="~@/assets/liangweiyiduan/total.png"
           alt=""> <span>总数</span>{{formatIntSalary(publishData .totalNum)}}</div>
    <div class="chart-container">
      <div ref="chartPie"
           :style="{width: '100%', height: '3.1rem'}"></div>
      <div>
        <div class="publish"
             v-for="(item,index) in list"
             :key="index">
          <div>
            <span></span>
            <div>{{item.name}}：{{item.num}}</div>
          </div>
          <div style="width:1.8rem;">占比：{{item.tab}}</div>
        </div>
      </div>
      <!-- <ul id="text">
        <li class="text5"
            v-for="(item,index) in list"
            :key="index">
          <span></span>
          {{item.name}}：{{item.num}} , &nbsp;&nbsp; {{item.tab}}
        </li>
      </ul> -->
    </div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  props: {
    publishData: {
      type: Object
    }
  },
  data () {
    return {
      list: []
    };
  },
  watch: {
    publishData: {
      handler (val) {
        this.drawPieChart();
      },
      deep: true
    }
  },

  methods: {
    //千分数
    formatIntSalary (num) {
      if (!num) return;
      num = parseInt(num)
        .toString()
        .split(".");
      // // console.log("第一次处理后的num",num);
      num[0] = num[0].replace(new RegExp("(\\d)(?=(\\d{3})+$)", "ig"), "$1,");
      // // console.log("第一次处理后的num",num[0]);
      return num.join(".");
    },
    drawPieChart () {
      this.chartPie = this.$echarts.init(this.$refs.chartPie);
      let data = [
        { value: this.publishData.wordRoadNum, name: "文字(路况)" },
        { value: this.publishData.audioNum, name: "音频(路况)" },
        { value: this.publishData.photoNum, name: "图文" },
        { value: this.publishData.videoNum, name: "视频" }
      ];
      this.list = [
        {
          tab: `${Number(this.publishData.wordRoad).toFixed(2)}%`,
          name: "文字(路况)",
          num: this.publishData.wordRoadNum
        },
        {
          tab: `${Number(this.publishData.audio).toFixed(2)}%`,
          name: "音频(路况)",
          num: this.publishData.audioNum
        },

        {
          tab: `${Number(this.publishData.photo).toFixed(2)}%`,
          name: "图文",
          num: this.publishData.photoNum
        },
        {
          tab: `${Number(this.publishData.video).toFixed(2)}%`,
          name: "视频",
          num: this.publishData.videoNum
        }
      ];
      this.chartPie.setOption({
        tooltip: {
          // showContent: false
        },
        grid: {
          width: "100%"
        },
        series: [
          {
            type: "pie",
            // roseType: "radius",
            radius: ["70%", "88%"],
            center: ["50%", "50%"],
            // avoidLabelOverlap: false,
            color: ["#11D0B6", "#01B1EE", "#A486F9", "#FFBB12"],
            label: {
              show: false,
              normal: {
                position: "inner",
                show: false
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: data
          }
        ]
      });
    },
    drawCharts () {
      this.drawPieChart();
    }
  }
  // mounted: function () {
  //   this.drawCharts();
  // }
};
</script>

<style scoped lang='less'>
.chart-container {
  width: 100%;
  // height: 235px;
  // position: relative;
}
// .text5 {
//   list-style: none;
//   height: 10%;
//   width: 100%;
// }
// #text {
//   height: 60%;
//   display: flex; /*定义为弹性盒子*/
//   flex-direction: column;
//   justify-content: space-between;
//   position: absolute;
//   top: 10%;
//   right: 0;
//   font-size: 0.24rem;
// }
// .text5:nth-of-type(1) {
//   color: #11d0b6;
//   span {
//     background-color: #11d0b6;
//   }
// }
// .text5:nth-of-type(2) {
//   color: #01b1ee;
//   span {
//     background-color: #01b1ee;
//   }
// }
// .text5:nth-of-type(3) {
//   color: #a486f9;
//   span {
//     background-color: #a486f9;
//   }
// }
// .text5:nth-of-type(4) {
//   color: #ffbb12;
//   span {
//     background-color: #ffbb12;
//   }
// }
// .text5 span {
//   display: inline-block;
//   width: 0.18rem;
//   height: 0.18rem;
//   border-radius: 50%;
//   margin-right: 0.16rem;
// }

.total {
  display: flex;
  align-items: center;
  font-size: 0.4rem;
  color: rgba(61, 61, 61, 1);
  font-weight: bold;
  font-family: DINAlternate-Bold, DINAlternate;
  margin-left: 0.24rem;
  padding: 0.4rem 0 0.4rem;
  img {
    height: 0.48rem;
  }
  span {
    font-size: 0.24rem;
    color: #898989;
    padding: 0 0.12rem;
  }
}

.publish {
  display: flex;
  justify-content: space-between;
  padding: 0 0.24rem 0.36rem;
  font-size: 0.24rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(61, 61, 61, 1);
  div:nth-of-type(1) {
    display: flex;
    align-items: center;
  }
  span {
    display: inline-block;
    width: 0.36rem;
    height: 0.2rem;
    border-radius: 0.1rem;
    margin-right: 0.24rem;
  }
}
.publish:nth-child(1) {
  span {
    background-color: #11d0b6;
  }
}
.publish:nth-child(2) {
  span {
    background-color: #01b1ee;
  }
}
.publish:nth-child(3) {
  span {
    background-color: #a486f9;
  }
}
.publish:nth-child(4) {
  span {
    background-color: #ffbb12;
  }
}
</style>